import React, {useState, forwardRef, useImperativeHandle, useRef} from 'react';
import {Form, Input, Modal, message} from "antd";
import {addBlogTypeApi, editBlogTypeApi} from "./blogTypeApi";

const SetBlogType = (props, ref) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [title, setTitle] = useState('添加博客类型');
    const [messageApi, contextHolder] = message.useMessage();
    const [RowId, setRowId] = useState(null)
    const formRef = useRef()


    const showModal = (name = null, row = null) => {
        if (name) {
            setTitle(name)
            setTimeout(() => {
                setRowId(row.id)
                formRef.current.setFieldsValue(JSON.parse(JSON.stringify(row)))
            }, 100)
        }

        setIsModalOpen(true);
    };
    // ok按钮
    const handleOk = async () => {
        try {
            formRef.current.validateFields().then(resData => {
                if (title === '添加博客类型') {
                    addBlogTypeApi(resData).then(res => {
                        if (res.code === '200') {
                            setIsModalOpen(false)
                            messageApi.open({
                                type: 'success', content: title + '成功'
                            })
                            props.getBlogTypeListFun()
                            handleCancel()
                        } else {
                            messageApi.open({
                                type: 'error', content: res.data.message
                            })
                        }
                    }).catch(e => {
                        messageApi.open({
                            type: 'error', content: e.message
                        })
                    })
                } else {
                    console.log(RowId)
                    editBlogTypeApi({...resData, id: RowId}).then(res => {
                        if (res.code === '200') {
                            setIsModalOpen(false)
                            messageApi.open({
                                type: 'success', content: title + '成功'
                            })
                            props.getBlogTypeListFun()
                            handleCancel()
                        } else {
                            messageApi.open({
                                type: 'error', content: res.data.message
                            })
                        }
                    }).catch(e => {
                        console.log(e)
                        messageApi.open({
                            type: 'error', content: e.message
                        })
                    })
                }
            })
        } catch (e) {
            console.log(e)
        }

    };

    // 取消按钮
    const handleCancel = () => {
        setTitle('添加博客类型')
        formRef.current.resetFields()
        setIsModalOpen(false);
    };


    useImperativeHandle(ref, () => {
        return {
            showModal
        }
    })


    return (<Modal title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            {contextHolder}
            <div>
                <Form
                    name="blogTypeForm"
                    layout="vertical"
                    style={{maxWidth: 600,}}
                    initialValues={{remember: true}}
                    ref={formRef}
                    autoComplete="off"
                >
                    <Form.Item
                        label="博客类型名称"
                        name="blogTypeName"
                        rules={[{
                            required: true, message: '博客类型名称不允许为空！！！',
                        },]}
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label="类型备注"
                        name="blogTypeRemark"
                    >
                        <Input.TextArea/>
                    </Form.Item>
                </Form>
            </div>
        </Modal>);
}

export default forwardRef(SetBlogType);
